{extend name="public/container"}
{block name="content"}
<div id="myApp" v-cloak>
    <div class="padding-10">
        <div class="douxue-filte flex flexbetween flex-center" style="margin-bottom:20px" v-if="default_org_id > 0">
            <div type="primary">可提现金额：￥<b class="money-size money-color">{{org_info.organ_balance}}</b></div>
            <div>当前到账微信号：
                <template v-if="org_info.is_valid==1">
                    <b class="text-success">{{org_info.wd_reciver_name}}（{{org_info.wd_reciver_realname}}）</b>
                </template>
                <template v-else>
                    <b class="text-danger">未设置</b>
                </template>
                <el-button size="mini" type="primary" icon="el-icon-setting" style="margin-left: 20px;" @click="settingOpen()">设置</el-button>
            </div>
        </div>

        <div class="">
            <div class="flex" style="justify-content:flex-end;">
                <el-button size="mini" type="primary" @click="doAdd()" v-if="default_org_id>0" style="margin-bottom:10px">新增申请</el-button>
            </div>
            <el-table
                border
                stripe
                :data="rows"
                style="width: 100%"
                size="mini">
                <el-table-column
                    prop="id"
                    label="ID"
                    width="80"
                    align="left">
                </el-table-column>
                <el-table-column
                    prop="organ_name"
                    label="所属机构"
                    width="160"
                    align="left">
                </el-table-column>
                <el-table-column
                    prop="amount"
                    label="提现金额"
                    width="140"
                    align="left">
                </el-table-column>
                <el-table-column
                    prop="wd_reciver_realname"
                    label="提现人姓名"
                    width="100"
                    align="left">
                </el-table-column>
                <el-table-column
                    prop="transaction_seq"
                    label="序列号"
                    width="200"
                    align="left">
                </el-table-column>
                <el-table-column
                    prop="create_time"
                    label="提交时间"
                    align="left">
                </el-table-column>
                <el-table-column
                    prop="audit_time"
                    label="审核时间"
                    width="140"
                    align="left">
                    <template slot-scope="scope">
                        <span v-if="scope.row.audit_time">{{scope.row.audit_time}}</span>
                        <span v-else>-</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="status"
                    label="提现状态"
                    align="left">
                    <template slot-scope="scope">
                        <el-tag type="warning" size="mini" v-if="scope.row.status==1">待审核</el-tag>
                        <el-tag type="success" size="mini" v-if="scope.row.status==2">已审核</el-tag>
                        <el-tag type="success" size="mini" v-if="scope.row.status==3">已付款</el-tag>
                        <el-tag type="warning" size="mini" v-if="scope.row.status==4">提现失败：{{scope.row.s4_reason}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                    label=""
                    width="90"
                    align="left">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="doModify(scope.row.id)" icon="el-icon-edit"></el-button>
                        <el-button size="mini" type="danger" @click="doDelete(scope.row.id)" icon="el-icon-delete"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    small
                    :hide-on-single-page="true"
                    layout="prev, pager, next"
                    :total="rowsCount"
                    :page-size="where.limit"
                    @current-change="doLoadRows">
                </el-pagination>
            </div>
        </div>
    </div>

    <!-- 设置提现微信号   -->
    <el-dialog title="设置提现微信号" :visible.sync="settingVisible" :close-on-click-modal="false" @close="beforeClose()">
        <el-form :model="withDrawAccount" ref="withDrawAccount" label-width="100px" >
            <el-form-item label="动态密码" prop="verify_code">
                <div>
                    {{org_info.organ_phone}}
                    <el-tooltip class="item" effect="dark" content="机构负责人手机号" placement="right">
                        <i class="el-icon-warning"></i>
                    </el-tooltip>
                </div>
                <el-input v-model="withDrawAccount.verify_code" placeholder="动态密码" autocomplete="off">
                    <el-button slot="append" @click="sendSms()">{{smsSendBtn}}</el-button>
                </el-input>
            </el-form-item>

            <el-form-item label="真实姓名" prop="realname">
                <el-input v-model="wd_reciver_realname" placeholder="请填写绑定提现微信的实名信息，否则无法提现" autocomplete="off">
                </el-input>
            </el-form-item>

            <el-form-item label="微信扫码">
                <el-image
                  style="width: 200px; height: 200px"
                  :src="codeUrl"
                  fit="fit">
                </el-image>

                <div v-if="confirm_info.wd_reciver_name">用户【 {{confirm_info.wd_reciver_name}} 】已扫码确认 <i class="text-success el-icon-success"></i></div>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('withDrawAccount')">确 定</el-button>
                <el-button @click="settingVisible = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

    <!-- 发起提现申请 -->
    <el-dialog title="提现申请" :visible.sync="withdrawApply" :close-on-click-modal="false">
        <el-form :model="applyInfo" ref="withDrawAccount" label-width="100px" >
            <el-form-item label="提现金额">
                <el-input-number v-model="applyInfo.amount" placeholder="提现金额" :min="1" :max="5000" ></el-input-number>
                <el-tooltip class="item" effect="dark" content="预计两小时内到帐" placement="right">
                    <i class="el-icon-warning"></i>
                </el-tooltip>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="doSave()">确 定</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>
{/block}
{block name="script"}
<script>
    var org_info = <?=isset($org_info) ? json_encode($org_info) : "{}"?>;
    var my = new Vue({
        el: "#myApp",
        data: {
            rowsCount: 0,
            rows: [],
            where:{
                page:1,
                limit: 30,
                school_id: default_school_id || '',
                status:'',
                title:'',
            }
            ,settingVisible:false
            ,withDrawAccount: {
                verify_code:''
            }
            ,codeUrl:'https://api.pwmqr.com/qrcode/create/?url=https://' + document.domain + Url({m:'wap',c:'withdraw', a:'set_wechat',q:{org_id:default_org_id}})
            ,confirm_info:{
                wd_reciver_account:'',
                wd_reciver_realname:'',
                wd_reciver_name:'',
                wd_type:''
            }
            ,wd_reciver_realname:''
            ,query_clock:null
            ,smsSendBtn:'发送'
            ,seconds:120
            ,default_org_id:default_org_id
            ,org_info:org_info
            ,withdrawApply:false
            ,applyInfo:{
                wd_type:'wechat',
                amount:0
            }
        },
        methods: {
            doLoadRows (pn) {
                this.where.page = pn || 1
                axios.get(Url({a:'get_list' , q:this.where})).then(res => {
                    this.rows = res.data.data
                    this.rowsCount = res.data.count
                })
            }
            // 设置状态
            ,settingOpen () {
                this.settingVisible = true
                var that = this
                this.query_clock = setInterval(function() {
                    axios.get(Url({a:'query_wechat'})).then(res => {
                        if ( res.data.code == 200 ) {
                            that.confirm_info = res.data.data
                            window.clearInterval(this.query_clock)
                        }
                    }).catch(_ => {
                        this.$message({
                            message: '异常',
                            type: 'error'
                        })
                    })
                },2000);
            }
            // 编辑
            ,doModify (id) {
                location.href = '{:Url('add')}?id=' + id
            }
            ,doDelete (id) {
                this.$confirm('确认删除该条记录?').then(_ => {
                    axios.get(Url({a:'delete' , q:{id:id}})).then(res => {
                        this.$message({
                            message: res.data.msg,
                            type: res.data.code === 200 ? 'success' : 'error',
                        })
                    }).catch(_ => {
                        return this.$message.error('删除失败')
                    })

                    return this.doLoadRows();
                }).catch(_ => {})
            }
            ,submitForm(formName) {
                if ( !this.confirm_info.wd_reciver_account ) {
                    return this.$message.error('请使用微信扫码确认')
                }

                if ( this.withDrawAccount.verify_code == '' ) {
                    return this.$message.error('请填写动态密码')
                }

                this.confirm_info.phone = this.org_info.header_phone
                this.confirm_info.code  = this.withDrawAccount.verify_code
                this.confirm_info.wd_reciver_realname  = this.wd_reciver_realname
                axios.post(Url({a:'save_wechat'}) , this.confirm_info).then(res => {
                    this.$message({
                        message: res.data.msg,
                        type: res.data.code === 200 ? 'success' : 'error',
                    })

                    if (res.data.code === 200) {
                        window.location.reload()
                    }
                }).catch(_ => {
                    console.error(_)
                })
            }
            // 关闭弹窗，关闭轮询
            ,beforeClose () {
                window.clearInterval(this.query_clock)

                // 删除未保存的微信账号
                axios.get(Url({a:'delete_wechat'})).then(res => {
                    console.log(res)
                }).catch(_ => {
                    console.error(_)
                })
            }
            // 发送短信验证码
            ,sendSms () {
                if ( this.seconds != 120 ) {
                    return this.$message.error('请' + this.seconds + '秒后重试')
                }

                var that = this
                axios.get(Url({m:'wap',c:'public_api',a:'code' , q:{phone:this.org_info.header_phone}})).then(res => {
                    this.$message.success('发送成功')
                    let send = setInterval(function() {
                        that.seconds--
                        if (that.seconds==0) {
                            window.clearInterval(send)
                            that.smsSendBtn = '发送'
                            that.seconds = 120
                            return;
                        }

                        that.smsSendBtn = that.seconds + '秒后重试'
                    },1000);

                }).catch(_ => {
                    console.error(_)
                })
            }
            // 新增提现申请
            ,doAdd () {
                if ( !this.org_info.wd_reciver_account ) {
                    return this.$message.error('请先添加提现账号')
                }

                if ( this.org_info.organ_balance <= 0 ) {
                    return this.$message.error('余额不足，暂不可发起')
                }

                this.withdrawApply = true

            }
            ,doSave () {
                if ( parseFloat(this.applyInfo.amount) <= 0 ) {
                    return this.$message.error('提现金额错误')
                }

                if ( this.applyInfo.amount > this.org_info.organ_balance ) {
                    return this.$message.error('余额不足，暂不可发起')
                }

                axios.post(Url({a:'save'}) , this.applyInfo).then(res => {
                    this.$message({
                        message: res.data.msg,
                        type: res.data.code === 200 ? 'success' : 'error',
                    })

                    if ( res.data.code === 200 ) {
                        this.withdrawApply = false
                        this.org_info.organ_balance = (this.org_info.organ_balance - this.applyInfo.amount).toFixed(2)
                        this.doLoadRows()
                    }
                }).catch(_ => {
                    console.error(_)
                })
            }
        },
        mounted(){
            this.doLoadRows()
        }
    })
</script>
{/block}